class Page{
    constructor(cname,options){
        // 获取到要放分页大盒子
        this.container = document.querySelector('.'+cname);
        // 创建一个容器
        this.content = document.createElement('div')
        // 修饰样式
        this.setStyle(this.content, {
            width: '50%',
            height: '50px',
            margin:'0 auto',
        /*     border: '1px solid #000', */
            display: 'flex',
            "justify-content": 'center',
            'align-items': 'center'
        })
        // 将content放到container中
        this.container.appendChild(this.content)
        // 鼠标移入变手指
        this.content.onmouseover = function(){
            this.style.cursor = 'pointer'
        }
        // 不允许选中文件
        this.content.onselectstart = ()=>false
        // 定义一个属性用来代表放页码的div
        this.pagelist = null
        // 自定义一个language
        this.default = {
            language: {
                first: '首页',
                prev: '上一页',
                pagelist: '',
                next: '下一页',
                last: '尾页'
            },
            pageData: {
                total: 1000,
                pageSize: 10
            }
        }
        // 如果别人传值了，就用别人的值替换自己的default
        if(options.language){
            for(var attr in options.language){
                this.default.language[attr] = options.language[attr]
            }
        }
        // 遍历options中的language来创建div并放内容
        for(var attr in this.default.language){
            // 创建div
            var div = document.createElement('div')
            // 添加类名
            div.className = attr;
            // 放内容
            div.innerText = this.default.language[attr]
            // 放到content中
            this.content.appendChild(div)
            // 修饰样式
            // 如果不是中间放页码的盒子才修饰样式
            if(attr !== 'pagelist'){
                this.setStyle(div, {
                    border: '1px solid #000',
                    margin: '5px',
                    padding: '5px'
                })
            }else{
                this.pagelist = div
                this.setStyle(this.pagelist, {
                    display: 'flex',
                    'justify-content': 'center',
                    'align-items': 'center'
                })
            }
        }

        // 创建页码 - 总共多少数据/每页显示多少/总页数
        // 判断用户是否传入数据的条数
        if(options.pageData){
            for(var attr in options.pageData){
                this.default.pageData[attr] = options.pageData[attr]
            }
        }
        // 使用default中的pageData来计算页码并创建
        this.totalPage = Math.ceil(this.default.pageData.total / this.default.pageData.pageSize)
        this.currentPage = 1
        this.createPage()
        // 调用一下回调函数
        this.show = options.show || function(){}
        this.show(this.currentPage)
        // 点击让页码动起来
        this.content.onclick = ()=>{
            var e = window.event;
            var target = e.target || e.srcElement;
            if(target.className === 'first'){
                this.currentPage = 1
                this.createPage()
                this.show(this.currentPage)
            }else if(target.className === 'prev'){
                this.currentPage--
                if(this.currentPage<=1){
                    this.currentPage = 1
                }
                this.createPage()
                this.show(this.currentPage)
            }else if(target.className === 'next'){
                this.currentPage++
                if(this.currentPage>=this.totalPage){
                    this.currentPage = this.totalPage
                }
                this.createPage()
                this.show(this.currentPage)
            }else if(target.className === 'last'){
                this.currentPage = this.totalPage
                this.createPage()
                this.show(this.currentPage)
            }else if(target.tagName === 'P'){
                this.currentPage = target.innerText-0
                this.createPage()
                this.show(this.currentPage)
            }
        }
    }
    // 创建页码的方法
    createPage(){
        this.pagelist.innerHTML = '';
        // 根据总页数创建页码
        // 总页数小于5
        if(this.totalPage<=5){
            for(var i=1;i<=this.totalPage;i++){
                var p = document.createElement('p')
                p.innerText = i;
                this.pagelist.appendChild(p)
                this.setStyle(p, {
                    padding: '5px',
                    margin: '5px',
                    border: '1px solid #000'
                })
                if(i === this.currentPage){
                    p.style.backgroundColor = 'purple';
                }
            }
        }
        // 总页数大于5
        else{
            // 当前页是前三页
            if(this.currentPage<=3){
                for(var i=1;i<=5;i++){
                    var p = document.createElement('p')
                    p.innerText = i;
                    this.pagelist.appendChild(p)
                    this.setStyle(p, {
                        padding: '5px',
                        margin: '5px',
                        border: '1px solid #000'
                    })
                    if(i === this.currentPage){
                        p.style.backgroundColor = 'purple';
                    }
                }
            }
            // 当前页是最后3页
            else if(this.currentPage>=this.totalPage-2){
                for(var i=this.totalPage-4;i<=this.totalPage;i++){
                    var p = document.createElement('p')
                    p.innerText = i;
                    this.pagelist.appendChild(p)
                    this.setStyle(p, {
                        padding: '5px',
                        margin: '5px',
                        border: '1px solid #000'
                    })
                    if(i === this.currentPage){
                        p.style.backgroundColor = 'purple';
                    }
                }
            }
            // 其他页
            else{
                for(var i=this.currentPage-2;i<=this.currentPage+2;i++){
                    var p = document.createElement('p')
                    p.innerText = i;
                    this.pagelist.appendChild(p)
                    this.setStyle(p, {
                        padding: '5px',
                        margin: '5px',
                        border: '1px solid #000'
                    })
                    if(i === this.currentPage){
                        p.style.backgroundColor = 'purple';
                    }
                }
            }
        }
    }
    // 修饰样式的函数
    setStyle(ele, styleObj){
        var str = '';
        for(var attr in styleObj){
            str += attr + ':' + styleObj[attr] + ';'
        }
        ele.style.cssText = str;
    }
}